
<div id="LAGcont">

</div>
<script language="javascript" type="text/javascript">

//****************************************
function getElementLeft(Elem) 
{

	    var elem = document.getElementById(Elem);
		var xPos = elem.offsetLeft;
		var tempEl = elem.offsetParent;
  		while (tempEl != null) {
  			xPos += tempEl.offsetLeft;
	  		tempEl = tempEl.offsetParent;
  		}
		return xPos;
}
//****************************************
function getElementTop(Elem) 
{
		var elem = document.getElementById(Elem);
		yPos = elem.offsetTop;
		tempEl = elem.offsetParent;
		while (tempEl != null) {
  			yPos += tempEl.offsetTop;
	  		tempEl = tempEl.offsetParent;
  		}
		return yPos;
}
//****************************************************


//         

var name_1=""; 
var img_1=""; 
var desc_1="";

var name_2=""; 
var img_2=""; 
var desc_2="";

var name_3=""; 
var img_3=""; 
var desc_3="";

var name_4=""; 
var img_4=""; 
var desc_4="";

var name_5=""; 
var img_5=""; 
var desc_5="";

var name_6=""; 
var img_6=""; 
var desc_6="";

var name_7=""; 
var img_7=""; 
var desc_7="";

var name_8=""; 
var img_8=""; 
var desc_8="";

var name_9=""; 
var img_9=""; 
var desc_9="";

var name_10=""; 
var img_10=""; 
var desc_10="";


var imgs = [img_1,img_2,img_3,img_4,img_5,img_6,img_7,img_8,img_9,img_10];
var names = [name_1,name_2,name_3,name_4,name_5,name_6,name_7,name_8,name_9,name_10];
var descs = [desc_1,desc_2,desc_3,desc_4,desc_5,desc_6,desc_7,desc_8,desc_9,desc_10];

var htm = '<table id="mt" cellpadding="0" cellspacing="0" border="1" width="99%" style="direction:ltr;">';
count = 1;
//
for(var i=0;i<names.length;i++)
{
  if(names[i]!="")
     {
       htm = htm + '<tr>\n';
       htm = htm + '  <td id="tdNAME_'+count+'" style="vertical-align:top; text-align:right; direction:rtl;"><span style="margin:5px;">'+names[i]+' </span></td>\n';
       htm = htm + '  <td style="width:50px; vertical-align:top;">\n';
       htm = htm + '     <img id="IMG_'+count+'" src="infimages/lagnah/'+imgs[i]+'" width="50" height="60" onmouseover="showtip(\'div_'+count+'\', \'IMG_'+count+'\')" onmouseout="hidetips()"/>';
       htm = htm + '     <div id="div_'+count+'" style="display:none; position:absolute; width:220px; height:200px; vertical-align:top; background: url(infimages/lagnah/point.png) no-repeat right top;; color:white;"> ';
       htm = htm + '        <div style=" margin-right:40px; height:100%; background:#634a05;"><div style=" text-align:right; direction:rtl; vertical-align:top; "><br/>'+descs[i]+' </div></div>';
       htm = htm + '     </div>';
       htm = htm + '  </td>\n';
       htm = htm + '</tr>\n';
       count = count + 1;
     }

}
htm = htm + '</table>';

document.getElementById("LAGcont").innerHTML=htm;

function showtip(ddd,Elc)
{
 document.getElementById(ddd).style.display="block";
 document.getElementById(ddd).style.top= (getElementTop(Elc)-20)+"px";
 document.getElementById(ddd).style.left= (getElementLeft(Elc)-219)+"px";
 document.getElementById(ddd).style.filter="alpha(opacity=85)";
 document.getElementById(ddd).style.opacity= 0.85;
}

function hidetips()
{
  for(var i=1;i<11;i++)
    {
      if(document.getElementById("div_"+i))
         {
           document.getElementById("div_"+i).style.display="none";
         }
    }
 
}

</script>

